<template>
    <div>
        <div class="monthslist">
            <div v-for="(item,index) in monthsList" @click="changeMonth(item,index)" :class="{'active':index==nowMonthIndex}">
                {{item.year+'-'+item.month}}
            </div>
        </div>
        <div class="head">
            <div>星期一</div>
            <div>星期二</div>
            <div>星期三</div>
            <div>星期四</div>
            <div>星期五</div>
            <div>星期六</div>
            <div>星期天</div>
        </div>
        <div class="body">
            <div class="item-con" v-for="(item,index) in arr">
                <div :class="[{'hidden':isHidden(item),'active':isActive(item)}]">
                    {{item.text}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  created() {
    this.__init();
  },
  methods: {
    isHidden(item) {
      if (item.text === "-") {
        return true;
      }
      return false;
    },
    isActive(item) {
      if (item.text == this.nowDay && this.nowMonthIndex == 3) {
        return true;
      }
      return false;
    },
    __init() {
      var theDate = new Date();
      var year = theDate.getFullYear(),
        month = theDate.getMonth(),
        day = theDate.getDate(), //本月几号
        weekday = theDate.getDay(), //星期几
        nowMonthDays =
          (new Date(year, month + 1).getTime() -
            new Date(year, month).getTime()) /
          (1000 * 60 * 60 * 24);

      var beginWeekDay = new Date(year, month).getDay();
      console.log(beginWeekDay);
      if (beginWeekDay === 0) {
        beginWeekDay = 7;
      }
      var arr = [];

      for (var i = 1; i < beginWeekDay; i++) {
        arr.push({ text: "-" });
      }
      for (i = 1; i <= nowMonthDays; i++) {
        arr.push({ text: i });
      }
      var startMonth = theDate.getMonth() - 3;
      var monthsList = [];
      for (i = 0; i < 7; i++) {
        monthsList.push({
          year: new Date(year, startMonth + i).getFullYear(),
          month: new Date(year, startMonth + i).getMonth() + 1
        });
      }

      this.nowDay = day;
      this.arr = arr;
      this.beginWeekDay = beginWeekDay;
      this.monthsList = monthsList;
    },
    changeMonth(item, index) {
      var theDate = new Date(item.year, item.month - 1);
      var themonthdays =
        (new Date(item.year, item.month).getTime() -
          new Date(item.year, item.month - 1).getTime()) /
        (1000 * 60 * 60 * 24);
      var beginweekday = theDate.getDay();
      if (beginweekday == 0) {
        beginweekday = 7;
      }
      this.arr = [];
      for (var i = 1; i < beginweekday; i++) {
        this.arr.push({ text: "-" });
      }

      for (i = 1; i <= themonthdays; i++) {
        this.arr.push({ text: i });
      }
      this.nowMonthIndex = index;
    }
  },
  data() {
    return {
      nowMonthIndex: 3,
      nowDay: 0,
      arr: [],
      beginWeekDay: 0,
      monthsList: []
    };
  }
};
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
.monthslist {
    display: flex;

    div {
        flex: 1;
        text-align: center;

        &.active {
            color: #42b983;
            font-weight: bold;
        }
    }
}

.head {
    display: flex;

    div {
        flex: 1;
        text-align: center;
        height: 40px;
        color: #42b983;
        line-height: 40px;
    }
}

.body {
    overflow: hidden;

    .item-con {
        float: left;
        width: 14.28%;
        text-align: center;
        box-sizing: border-box;
        padding: 0 5px 5px;

        div {
            border-top: 2px solid #42b983;
            background: #bdddcb;
            color: #666;
            height: 50px;
            box-sizing: border-box;

            &.hidden {
                border-top: 2px solid #999;
                background: #f1f1f1;
            }

            &.active {
                background: #fcfcfc;
                border: 2px solid #42b983;
            }

            &:hover {
                background: #fcfcfc;
                border: 2px solid #42b983;
            }
        }
    }
}
</style>
